<!--
 * 文件描述: 插槽组件演示
 * @author Lz on 2020/7/5
 -->
<template>
  <div>
    <h3>我是插槽组件：下面是插槽内容</h3>
    <slot>
      <h4>后备内容。</h4>
    </slot>
    <slot
      :user="user"
      name="content">
    </slot>

    <div>
      <ul>
        <li
          v-for="todo in filteredTodos"
          v-bind:key="todo.id"
        >
          <!--
            我们为每个 todo 准备了一个插槽，
            将 `todo` 对象作为一个插槽的 prop 传入。
          -->
          <slot name="todo" v-bind:todo="todo">
            <!-- 后备内容 -->
            {{ todo.text }}
          </slot>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: "item-slot",
    components: {},
    data() {
      return {
        user: 'eeeee',
        filteredTodos: [
          {
            text: '文本1',
            isComplete: true
          },
          {
            text: '文本2',
            isComplete: false
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
